<template>
	<view class="">
		<u-navbar title-bold title-color="#333" title-size="36" title="法海广场详情"></u-navbar>
		<view class="shipin-div" v-if="type==1">
			<view class="pro-img flex flex_cen">
				<!-- <swiper @change="swchange" class="swiper" circular indicator-dots indicator-active-color="#D3A358"
					indicator-color="#E6E3DE ">
					<swiper-item>
						<video class="pro-item-img" :src="datadetail.video" controls></video>
					</swiper-item>
					
				</swiper> -->
				<video class="pro-item-img" :src="datadetail.video" controls autoplay></video>
				<!-- <image class="pro-item-img" src="../../static/img/home/c-bg.png" mode="aspectFill"></image>
				<image class="pro-item-bf" src="../../static/img/home/bofang-icon.png" mode=""></image> -->
			</view>
			<view class=" u-padding-32">
				{{datadetail.content}}
			</view>
			<view class="xx-div">
				<view class="flex flex_sb">
					<view class="flex">
						<image class="headimg" :src="lvshiInfo.avatar" mode="aspectFill"></image>
						<view class="font_14_999 u-m-l-16">
							{{lvshiInfo.name}}
						</view>
					</view>
					<view class="font_12_999">
						{{datadetail.view_count+1}}浏览
					</view>
				</view>
				<view class="flex flex_sb u-m-t-40">
					<view class="flex" v-for="(item,index) in datadetail.serves" :key="index"
						v-if="item.tag_id==datadetail.tag2_id">
						<image class="lef-icon" :src="action + item.icon" mode=""></image>
						<view class="u-m-l-24">
							<view class="font_weight">
								{{item.name}}
							</view>
							<view class="u-m-t-10">
								<span class="m-fh">￥</span>
								<span class="m-m">{{item.price}}</span>
								<span class="m-sj">/{{item.time_sku}}{{item.unit_name}}</span>
							</view>
						</view>
					</view>
					<view class="xd-btn" @click="toxiadn">
						
						{{lvshiInfo.is_online==1?'立即咨询':'预约咨询'}}
					</view>
				</view>
			</view>
		</view>

		<view class="tuwen-div" v-if="type==2">
			<view class="tuwen-div-d">
				<view class="font_weight font_18_333">
					{{datadetail.title}}
				</view>
				<view class="flex flex_sb u-m-t-24">
					<view class="font_12_999">
						{{datadetail.created_at}}
					</view>
					<view class="font_12_999">
						{{datadetail.view_count+1}}浏览
					</view>
				</view>
				<view class="ls-div u-m-t-26" @click="tolvshi">
					<image class="tw-lsbg" src="../../static/img/home/tw-lsbg.png" mode=""></image>
					<view class="flex">
						<image class="headimg" :src="lvshiInfo.avatar" mode="aspectFill"></image>
						<view class="u-m-l-20">
							<view class="flex">
								<view class="font_14_333 font_weight">
									{{lvshiInfo.name}}
								</view>
								<view class="flex" v-if="lvshiInfo.province">
									<image class="u-m-l-8 h23" src="../../static/img/home/h23.png" mode=""></image>
									<view class="font_10_333 u-m-l-8">
										{{lvshiInfo.province}}
									</view>
								</view>
								<view class="flex u-m-l-16 ">
									<image class="h24" src="../../static/img/home/h24.png" mode=""></image>
									<view class="pf-t">{{lvshiInfo.mark}}</view>
								</view>
							</view>

							<view class="u-m-t-14 font_10_666">
								执业证号：{{lvshiInfo.license_num}}
							</view>
						</view>

					</view>
				</view>
				
				<view class="u-m-b-80 u-m-t-48" v-if="datadetail.images && datadetail.images.length>0">
					<!-- <view class=" u-m-t-48" v-for="(item,index) in datadetail.images" :key="index">
						<image style="width: 100%;" :src="item" :style="{ height: imgHeight + 'px' }" mode="widthFix"
							@load="onImgLoad">
						</image>
					</view> -->
					<u-swiper height="960" :list="datadetail.images" img-mode="aspectFit"></u-swiper>
				</view>
				<view class="addimg u-m-t-48" v-if="datadetail.video">
					<video class="addimg" :src="datadetail.video" controls></video>
				</view>
				<view class="u-m-t-48">
					{{datadetail.content}}
				</view>
			</view>
			
			<view class="xx-div">
				<view class="flex flex_sb ">
					<view class="flex" v-for="(item,index) in datadetail.serves" :key="index"
						v-if="item.tag_id==datadetail.tag2_id">
						<image class="lef-icon" :src="action + item.icon" mode=""></image>
						<view class="u-m-l-24">
							<view class="font_weight">
								{{item.name}}
							</view>
							<view class="u-m-t-10">
								<span class="m-fh">￥</span>
								<span class="m-m">{{item.price}}</span>
								<span class="m-sj">/{{item.time_sku}}{{item.unit_name}}</span>
							</view>
						</view>
					</view>
					<view class="xd-btn" @click="toxiadn">
						立即下单
					</view>
				</view>
			</view>
		</view>


		<u-popup v-model="zixunShow" mode="bottom" closeable border-radius="32"  :mask-close-able="false">
			<view class="po-bikan">
				<view class="bk-title u-m-b-32">
					全部服务
				</view>
				<scroll-view scroll-y="true" style="height: 650rpx;"  >
					<fuwuList v-if="lvshiInfo.id" :sid="lvshiInfo.id"></fuwuList>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import fuwuList from '../../components/fuwuList/fuwuList.vue';
	export default {
		components: {
			fuwuList,
		},
		data() {
			return {
				type: 0, //1视频  2图文
				id: '',
				datadetail: [],
				lvshiInfo: [],
				action: '',
				imgHeight: 0,
				zixunShow:false
			}
		},
		onLoad(e) {
			this.action = this.$config.imgUrl
			this.id = e.id
			this.detail()
		},
		methods: {
			onImgLoad(e) {
				// 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
				const {
					width,
					height
				} = e.mp.detail;
				this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
			},

			tolvshi() {
				uni.navigateTo({
					url: "/pages/lawyer/lawyerDetail?id=" + this.datadetail.lawyer_id
				})
			},
			toxiadn() {
				
				
				if(this.lvshiInfo.is_online==1){
					this.zixunShow = true
				}else{
					uni.navigateTo({
						url: "/pages/lawyer/lawyerListDetail?id=" + this.datadetail.lawyer_id
					})
				}
				
				
			},
			detail() {
				this.$api({
					url: '/lawyer/getSeaInfo',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						id: this.id
					},
				}).then(res => {
					if (res.code == 1) {
						this.datadetail = res.data
						if (this.datadetail.video) {
							this.type = 1
						} else {
							this.type = 2
						}
						this.lvdetail()
					}
				})
			},
			lvdetail() {
				this.$api({
					url: '/lawyer/detail',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						lawyer_id: this.datadetail.lawyer_id
					},
				}).then(res => {
					if (res.code == 1) {
						this.lvshiInfo = res.data
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.po-bikan {
		padding: 40rpx 32rpx;
		background: #F6F6F6;
		width: 100%;
	
		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
	}
	.page{
		
	}
	.addimg {
		width: 100%;
		height: 384rpx;
	}

	.shipin-div {
		padding-bottom: 280rpx;

		.pro-img {
			position: relative;
			width: 100%;
			height: 1120rpx;
			border-radius: 8rpx;

			.pro-item-img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 1120rpx;
				border-radius: 8rpx;
			}

			.pro-item-bf {
				width: 80rpx;
				height: 80rpx;
			}
		}


	}

	.xx-div {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		// height: 256rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		padding: 26rpx 32rpx;

		.headimg {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
		}

		.lef-icon {
			width: 84rpx;
			height: 84rpx;

		}

		.m-fh {
			font-weight: bold;
			font-size: 32rpx;
			color: #FC3A30;
		}

		.m-m {
			font-weight: bold;
			font-size: 44rpx;
			color: #FC3A30;
		}

		.m-sj {
			font-size: 24rpx;
			color: #666666;
		}

		.xd-btn {
			width: 188rpx;
			height: 72rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 100rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 72rpx;

		}
	}
	.saksjahk{
		width: 100%;
		height: 580rpx;
	}
	.tuwen-div {
		padding-bottom: 280rpx;
		
		.tuwen-div-d {
			padding: 28rpx 32rpx;
			

			.ls-div {
				position: relative;
				width: 686rpx;
				height: 120rpx;
				background: linear-gradient(90deg, #FFF8EF 0%, #FFFBF5 55%, #FFF8EF 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #F4CF9C;
				padding: 18rpx 24rpx;

				.tw-lsbg {
					width: 120rpx;
					height: 120rpx;
					position: absolute;
					right: 0;
					top: 0;
				}

				.headimg {
					height: 84rpx;
					width: 68rpx;
					border-radius: 8rpx;
				}

				.h23 {
					width: 24rpx;
					height: 20rpx;
				}

				.h24 {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}

				.pf-t {
					font-size: 20rpx;
					color: #FD8643;
				}
			}

		}

	}
</style>